<template>
	<div class="radio-sort-wraper">
		<div class="nav-head"><router-link to="/radio"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">电台分类</div></div>
		<div class="top-blank"></div>
		<div class="sort-wraper">
			<div class="radio-sort-list">
				<div class="sort-nav">
					<span class="ml43"><router-link to="radHot">热门</router-link></span>
					<span>夜晚</span>
					<span>最近</span>
					<span>情感</span>
					<span>晚安</span>
					<span>治愈</span>
					<span>个性</span>
					<span><router-link to="/radMor">更多</router-link></span>
				</div>
				<div class="sort-list">
					<div><img src="../../../../assets/1120.png"><p>热门电台</p></div>
					<div><img src="../../../../assets/2120.png"><p>个性电台</p></div>
					<div><img src="../../../../assets/3120.png"><p>随心听</p></div>
					<div><img src="../../../../assets/4120.png"><p>情感治愈</p></div>
					<div><img src="../../../../assets/5120.png"><p>车载随听</p></div>
					<div><img src="../../../../assets/6120.png"><p>化雪电台</p></div>
					<div><img src="../../../../assets/7120.png"><p>王明电台</p></div>
					<div><img src="../../../../assets/8120.png"><p>随意听</p></div>
					<div><img src="../../../../assets/9120.png"><p>听听故事</p></div>
					<div><img src="../../../../assets/1120.png"><p>歌曲随听</p></div>
				</div>
			</div>
			<div class="live">
				<h2>正在直播</h2>
				<div class="live-list">
					<div class="mr10"><img src="../../../../assets/11120.png"><p>王力宏治愈你的心灵，我们不必在乎过去</p></div>
					<div><img src="../../../../assets/11120.png"><p>王力宏治愈你的心灵，我们不必在乎过去</p></div>
					<div class="mr10"><img src="../../../../assets/11120.png"><p>王力宏治愈你的心灵，我们不必在乎过去</p></div>
					<div><img src="../../../../assets/11120.png"><p>王力宏治愈你的心灵，我们不必在乎过去</p></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default {
		name:"radioSort",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.sort-wraper{
	width: 100%;
	overflow: hidden;
	background-color: #dbd7df;
	.radio-sort-list{
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		.sort-nav{
			width: 100%;
			margin-top: 32 / 100rem;
			margin-bottom: 27 / 100rem;
			overflow: hidden;
			span{
				display: block;
				float: left;
				font-size: 24 / 100rem;
				margin-left: 40 / 100rem;
			}
			.ml43{
				margin-left: 43 / 100rem;
			}
		}
		.sort-list{
			overflow: hidden;
			margin-left: 30 / 100rem;
			padding-bottom: 14 / 100rem;
			div{
				width: 120 / 100rem;
				float: left;
				margin-bottom: 16 / 100rem;
				margin-right: 23 / 100rem;
				img{
					width: 100%;
				}
				p{	
					margin-top: 10 / 100rem;
					font-size: 24 / 100rem;
					text-align: center;
				}
			}
		}
	}
	.live{
		overflow: hidden;
		margin-top: 20 / 100rem;
		background-color: #fff;
		width: 100%;
		h2{
			width: 100%;
			margin-left: 20 / 100rem;
			padding-top: 28 / 100rem;
			padding-bottom: 19 / 100rem;
		}
		.live-list{
			width: 100%;
			div{
				width: 370 / 100rem;
				float: left;
				img{
					width: 100%;
				}
				p{
					font-size: 24 / 100rem;
					margin-left: 20 / 100rem;
					line-height: 46 / 100rem;
					letter-spacing: 1px;
				}
			}
			.mr10{
				margin-right: 10 / 100rem;
			}
		}
	}
}	
</style>